<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通知</title>
<link rel="stylesheet" type="text/css"
	href="/bootstrap/bootstrap.4.1.0.css">
<script src="/bootstrap/jquery.3.2.1.min.js"></script>
<script src="/bootstrap/popper.12.5.min.js"></script>
<script src="/bootstrap/bootstrap.4.1.0.min.js"></script>
<script src="/layui/layer/layer.js"></script>
<script src="/vue/Vue.js"></script>
<script src="/vue/axios.js"></script>
<style type="text/css">
.active {
	background-color: blue;
}
</style>
<script type="text/javascript">
	$(function(){
		$("#header").load("/zlz/header.html");
	})
</script>

</head>
<body>
	<div id="header" >
	</div>
	<div id="app" class="container">
	<div v-if="msges!=null">
		<table class="table table-striped table-hover text-center">
			<thead>
				<tr>
					<th>序号</th>
					<th>发送者</th>
					<th>内容</th>
					<th>发送时间</th>
					<th colspan="2">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(msg,index) in msges" :key="index">
					<td>{{index+1}}</td>
					<td>{{msg.sender.nickname}}</td>
					<td>{{msg.content}}</td>
					<td>{{msg.sendTime}}</td>
					<!-- 普通消息 -->
					<td v-if="msg.orderStatus==null&&msg.sginId==0"><button :disabled="msg.readed"
							class="btn btn-outline-primary" @click="markReaded(msg)">{{msg.btn_content}}</button>
					<td v-else-if="!msg.readed&&msg.orderStatus!='2'">
						<button :disabled="msg.readed"
							class="btn btn-outline-primary" @click="accept(msg)">{{msg.accept}}</button>
						<button :disabled="msg.readed"
							class="btn btn-outline-danger" @click="refuse(msg)">{{msg.refuse}}</button>
					</td>
					<td v-else-if="!msg.readed&&msg.orderStatus=='2'">
						<button :disabled="msg.readed" v-if="msg.payed"
							class="btn btn-outline-primary" @click="remark(msg)">评价</button>
						<button :disabled="msg.readed" v-else
							class="btn btn-outline-primary" @click="pay(msg)">{{msg.pay}}</button>
					</td>
					<td v-else-if="msg.readed">
						<button class="btn btn-outline-info" disabled>{{msg.opr}}</button>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="row">
			<div class="offset-md-5">
				<ul class="pagination">
					<li class="page-item"><a class="page-link" href="#" @click.prevent="prePage"> <</a></li>
					<li class="page-item"  v-for="(item, index) in pageNum"><a class="page-link" href="#"
						v-on:click.prevent="getUnread(item)" :class="{active: currentPage==index+1}">{{
							index+1 }}</a></li>
					<li class="page-item"><a class="page-link" href="#" v-on:click.prevent="nextPage">></a></li>
				</ul>
			</div>
		</div>
		</div>
		<div v-else class="row">
			<p class="offset-md-5">您当前没有新消息</p>
		</div>
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			msges:[],
			pageNum:0,
			currentPage:0,
			active:""
		},
		mounted(){
			this.getUnread(1);
		},
		methods:{
			getUnread:function(page){
				axios.get("/msg/show?page="+page)
				.then(
					res => {
						if(res.data.code==1){
							var msges = res.data.data.list;
							if(msges!=null){
								msges.forEach(el => {
									el.readed = false;
									if(el.orderStatus==null&&el.sginId==0){
										el.btn_content = "标记为已读";
									}else if(el.orderStatus==2){
										el.pay = "支付";
										el.payed = false;
									}else{
										el.accept = "接受";
										el.refuse = "拒绝";
										el.opr = "已接受";
									}
								})
							}
							this.msges = msges;
							this.currentPage = res.data.data.nowPage;
							this.pageNum = res.data.data.totalPage;
						}else{
							layer.alert("服务器忙，请稍后再试");
						}
					}
				
				)
			},
			markReaded:function(msg){
				axios.get("/msg/mark?id="+msg.id)
				.then(
					res => {
						if(res.data.code==1){
							//修改该button的样式并禁用
							msg.readed = true;
							msg.btn_content = "已读";
						}else{
							layer.alert("服务器忙，请稍后再试");
						}
					}
				
				)
			},
			prePage:function(){
				if(this.currentPage>1){
					this.getUnread(this.currentPage-1);
				}
			},
			nextPage:function(){
				if(this.currentPage<this.pageNum){
					this.getUnread(this.currentPage+1);
				}
			},
			accept:function(msg){
				if(msg.orderId!=0){
				//处理业务逻辑
				axios.get("/msg/acceptOrder?oid="+msg.orderId+"&mid="+msg.id)
					.then(
						res => {
							if(res.data.code==1){
								layer.alert("已接受该课程");
								msg.readed = true;
								msg.opr="已接受";
							}else if(res.data.code==3){
								layer.alert("该课程已受理");
								msg.readed = true;
								msg.opr="已处理";
							}else{
								layer.alert("系统维护中，请稍后再试")
							}		
							
						})
				}else if(msg.sginId!=0){
					axios.get("/msg/acceptSign?sid="+msg.sginId+"&mid="+msg.id)
					.then(
						res => {
							if(res.data.code==1){
								layer.alert("已接受该签约申请");
								msg.readed = true;
							}else{
								layer.alert("系统维护中，请稍后再试")
							}		
							
						})
				}
			},
			refuse(msg){
				//处理业务逻辑
				if(msg.orderId!=0){
				axios.get("/msg/refuseOrder?oid="+msg.orderId+"&mid="+msg.id)
					.then(
						res => {
							if(res.data.code==1){
								layer.alert("已拒绝该课程");
								msg.readed = true;
								msg.opr="已拒绝";
							}else if(res.data.code==3){
								layer.alert("该课程已受理");
								msg.readed = true;
								msg.opr="已处理";
							}else{
								layer.alert("系统维护中，请稍后再试")
							}		
							
						})
				}else if(msg.sginId!=0){
					axios.get("/msg/refuseSign?sid="+msg.sginId+"&mid="+msg.id)
					.then(
						res => {
							if(res.data.code==1){
								layer.alert("已拒绝该签约申请");
								msg.readed = true;
								msg.opr="已拒绝";
							}else{
								layer.alert("系统维护中，请稍后再试")
							}		
							
						})
					
				}
				
			},
			pay:function(msg){
				axios.get("/msg/pay?mid="+msg.id+"&oid="+msg.orderId)
				.then(
					res => {
						if(res.data.code==1){
							msg.payed = true;
							layer.alert("已成功支付");
						}else if(res.data.code==3){
							layer.confirm('您的账户余额不足，是否前往充值？', {
								  btn: ['是的','不必了'] //按钮
								}, function(){
								  location.href = "/zlz/mywallet.html"
								}, function(){
								  return;
								});
						}else if(res.data.code==4){
							msg.readed = true;
							msg.opr = "已确认";
							layer.alert("该订单或已被支付，请勿重复支付");
						}else{
							layer.alert("系统维护中，请稍后再试")
						}		
						
				})
			},
			remark:function(msg){
				location.href = "/zlz/remark.html?id="+msg.orderId;
			}
		}
	})
</script>
</html>